<!--  -->
<template>
  <div class="hbh-container">
    <commonTitle :title="'能耗汇总'" />
    <div class="cards">
      <div class="itemChild" v-for="(item, index) in allData" :key="index">
        <div class="imgBox">
          <img
            src="https://files.axshare.com/gsc/E0EL5C/fd/21/59/fd2159f2f7f94050a3ed7c0fb1c4079a/images/%E5%8D%95%E4%B8%AA%E8%AE%BE%E5%A4%87-%E7%83%AD%E6%B3%B5/u87.png?pageId=056fc251-7e79-4874-a3db-72c5e3559968"
            alt=""
          />
          <img :src="item.imgSrc" alt="" />
        </div>
        <div class="infos">
          <div class="leftTitle">{{ item.name }}</div>
          <div class="middle">
            <span>{{ item.dayValue }}</span
            ><span>本日总能耗 {{ item.unit }}</span>
          </div>
          <div class="end">
            <span>{{ item.monthValue }}</span
            ><span>本月总能耗 {{ item.unit }}</span>
          </div>
        </div>
        <img
          class="banner"
          src="https://files.axshare.com/gsc/E0EL5C/fd/21/59/fd2159f2f7f94050a3ed7c0fb1c4079a/images/%E5%8D%95%E4%B8%AA%E8%AE%BE%E5%A4%87-%E7%83%AD%E6%B3%B5/u86.png?pageId=056fc251-7e79-4874-a3db-72c5e3559968"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "egcollect",
  components: {},
  data() {
    //这里存放数据
    return {
      allData: [
        {
          name: "电耗能",
          dayValue: 497,
          monthValue: 2309,
          unit: "kw/h",
          imgSrc:
            "https://files.axshare.com/gsc/E0EL5C/fd/21/59/fd2159f2f7f94050a3ed7c0fb1c4079a/images/%E5%8D%95%E4%B8%AA%E8%AE%BE%E5%A4%87-%E7%83%AD%E6%B3%B5/u91.png?pageId=056fc251-7e79-4874-a3db-72c5e3559968",
        },
        {
          name: "水耗能",
          dayValue: 297,
          monthValue: 4309,
          unit: "吨",
          imgSrc:
            "https://files.axshare.com/gsc/E0EL5C/fd/21/59/fd2159f2f7f94050a3ed7c0fb1c4079a/images/%E5%8D%95%E4%B8%AA%E8%AE%BE%E5%A4%87-%E7%83%AD%E6%B3%B5/u98.png?pageId=056fc251-7e79-4874-a3db-72c5e3559968",
        },
        {
          name: "气耗能",
          dayValue: 597,
          monthValue: 9309,
          unit: "立方",
          imgSrc:
            "https://files.axshare.com/gsc/E0EL5C/fd/21/59/fd2159f2f7f94050a3ed7c0fb1c4079a/images/%E5%8D%95%E4%B8%AA%E8%AE%BE%E5%A4%87-%E7%83%AD%E6%B3%B5/u105.png?pageId=056fc251-7e79-4874-a3db-72c5e3559968",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.hbh-container {
  width: 100%;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .cards {
    width: 100%;
    display: flex;
    flex-direction: column;
    .itemChild {
      display: flex;
      align-items: center;
      position: relative;
      width: 100%;
      .banner {
        position: absolute;
        width: calc(100% - 65px);
        height: 18px;
        left: 65px;
        bottom: 10px;
      }
      .imgBox {
        width: 95px;
        height: 95px;
        position: relative;
        img:nth-of-type(1) {
          width: 100%;
          height: 100%;
        }
        img:nth-of-type(2) {
          position: absolute;
          width: 24px;
          height: 26px;
          top: calc(50% - 13px);
          left: calc(50% - 12px);
        }
      }
      .infos {
        width: calc(100% - 95px);
        padding: 0 40px;
        box-sizing: border-box;
        display: flex;
        height: 95px;
        align-items: center;
        justify-content: space-between;
        .leftTitle {
          color: #a4cdd2;
        }
        .middle {
          display: flex;
          flex-direction: column;
          // padding: 0 20px;
          span:nth-of-type(1) {
            font-size: 30px;
            margin-bottom: 10px;
          }
        }
        .end {
          display: flex;
          flex-direction: column;
          // padding: 0 20px;
          span:nth-of-type(1) {
            font-size: 30px;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}
</style>
